import { useState } from "react";
import styles from "./index.module.css";
import HomeC from "../../image/home_check.png";
import HomeN from "../../image/home_no.png";
import HisC from "../../image/his_check.png";
import HisN from "../../image/his_no.png";
import MineC from "../../image/mine_check.png";
import MineN from "../../image/mine_no.png";
import { useLocation, useNavigate } from "react-router-dom";

interface TabItemProps {
  title: string;
  check: string;
  noCheck: string;
  url: string;
}

const TabItem: TabItemProps[] = [
  {
    title: "首页",
    check: HomeC,
    noCheck: HomeN,
    url: '/page'
  },
  {
    title: "历史记录",
    check: HisC,
    noCheck: HisN,
    url: '/his'
  },
  {
    title: "我的",
    check: MineC,
    noCheck: MineN,
    url: '/mine'
  },
];

const defaultCheck = (url: string) => {
    return url === '/page' ? 0 : url === '/his' ? 1 : 2;
}

const Tabs = () => {
    const navigate = useNavigate();
  const location = useLocation();
  const [active, setActive] = useState<Number>(defaultCheck(location.pathname));

  return (
    <div className={styles.tabs}>
      {TabItem.map((item: TabItemProps, ind: number) => {
        const nowImg: string = active === ind ? item.check : item.noCheck;
        const nowColor: string =
          active === ind ? "black" : "rgba(152, 162, 179, 1)";
        return (
          <div
            className={styles.tab_item}
            key={ind}
            onClick={() => {
                setActive(ind);
                navigate(item.url);
            }}
          >
            <img
              style={{ width: "24px", height: "24px" }}
              src={nowImg}
              alt={item.title}
            />
            <div style={{ fontSize: "12px", color: nowColor }}>
              {item.title}
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default Tabs;
